<template>
    <view class="page">
        <view class="page-item" v-for="(item, index) in dataList" :key="index" @click="skipActivityDetail(item.activity_id)">
            <view class="page-item-top">
                <view class="item-top-left">
                    <img :src="item.activity_info.img_url" mode="aspectFill" />
                </view>
                <view class="item-top-right">
                    <view class="desc">
                        {{ item.activity_info.name }}
                    </view>
                    <view class="tip">
                        <view class="tip-time">{{ item.created_at.split(' ')[0] }}</view>
                        <view class="tip-status" :class="{'red':item.activity_info.activity_status_name=='报名中','yellow':item.activity_info.activity_status_name=='进行中','green':item.activity_info.activity_status_name=='已结束'}">{{item.activity_info.activity_status_name}}</view>
                    </view>
                </view>
            </view>
            <view class="page-item-bottom">
<!--                <view class="title">活动费用：</view>-->
                <view class="money red">{{item.activity_info.cost==0.00?'免费':'￥'+item.activity_info.cost}}</view>
<!--                <view class="type green" v-if="item.activity_info.cost!=0.00">（已付款）</view>-->
            </view>
        </view>
        <view class="null">
            <text v-if="dataList.length>0">没有更多了哦～</text>
            <text v-if="dataList.length==0">暂无参加活动～</text>
        </view>
    </view>
</template>

<script>
    export default {
        name: "myActivity",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                page: 0,
                dataList: []
            }
        },
        onShow(){
          this.getUserJoinActivityList();
        },
        methods:{
            //获取我参与的活动列表
            async getUserJoinActivityList(){
              let params = {
                  user_token: uni.getStorageSync('userToken'),
                  limit: 10,
                  page: this.page
              }
              const res = await this.$api.getUserJoinActivityList(params);
              if (res.data.level == 'success'){
                  this.dataList = res.data.data;
              }
            },
            //跳转活动详情页面
            skipActivityDetail(id){
                uni.navigateTo({
                    url:'/pages/details/activityDetail/activityDetail?activityId='+id
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        min-height: calc(100vh - 20rpx);
        padding-top: 20rpx;
    }
    .list-bottom{
        padding: 23rpx 0;
        @include flex();
        flex-direction: column;
        text{
            height: 40rpx;
            line-height: 40rpx;
            font-size: 28rpx;
            color: #B5B5B5;
        }
    }
    .page-item{
        padding: 0 30rpx;
        margin-bottom: 20rpx;
        background: #FFFFFF;
        .page-item-top{
            padding: 30rpx 0;
            border-bottom: 1rpx solid #E5E5E5;
            @include flex(flex-start);
            flex-direction: row;
            .item-top-left{
                width: 220rpx;
                height: 152rpx;
                overflow: hidden;
                border-radius: 10rpx;
            }
            .item-top-right{
                margin-left: auto;
                height: 152rpx;
                width: calc(100% - 240rpx);
                @include flex(flex-start,flex-start);
                flex-direction: column;
                .desc{
                    height: 84rpx;
                    line-height: 42rpx;
                    font-size: 30rpx;
                    @include ellipsis(2);
                }
                .tip{
                    margin-top: auto;
                    height: 42rpx;
                    width: 100%;
                    @include flex(flex-start);
                    flex-direction: row;
                    .tip-time{
                        height: 42rpx;
                        line-height: 42rpx;
                        color: #9B9B9B;
                        font-size: 28rpx;
                    }
                    .tip-status{
                        margin-left: auto;
                        height: 42rpx;
                        line-height: 42rpx;
                        font-size: 30rpx;
                    }
                }
            }
        }
        .page-item-bottom{
            padding: 24rpx 0;
            @include flex(flex-start);
            flex-direction: row;
            view{
                height: 56rpx ;
                line-height: 56rpx;
            }
            .title{
                font-size: 30rpx;
                font-weight: ceil(600);
            }
            .money{
                font-size: 40rpx;
                font-weight: ceil(600);
            }
            .type{
                font-size: 30rpx;
            }
            .free{
                font-size: 28rpx;
                font-weight: ceil(600);
            }
        }
    }
</style>